<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="f" %>
<c:if test="${!ajaxRequest}">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Sun's Family Tree</title>
    
	<link href="<c:url value="/resources/static/ui/global/style/form.css" />" rel="stylesheet"  type="text/css" />  
    <script type="text/javascript" src="<c:url value="/resources/static/js/global/jquery.js" />"></script>
    
    <style type="text/css">
    	.div_login{
    		position:absolute;
    		width:300px;
    		height: 180px; 
    		z-index:1;
    	}
    
    </style>
    
    <script type="text/javascript">
    	//访问地址
    	var url_register_page = '<c:url value="/register/page"/>';
    	var url_login_validate = '<c:url value="/login/validate"/>';
    	var url_main_page = '<c:url value="/main/page"/>';
    	
    	$(function(){
			$("#a_register").attr("href",url_register_page);
			$("#form_login").attr("action",url_login_validate);
			
			window.onscroll=setCenter;
        	window.onresize=setCenter;
        	window.onload=setCenter;
				
		});
    	
    	function setCenter(){
	    	 var div_centerItem=document.getElementById("centerItem");
	    	 div_centerItem.style.top=parseInt(document.documentElement.clientHeight/2+document.documentElement.scrollTop-centerItem.offsetHeight/2)-106+"px";
	    	 div_centerItem.style.left=parseInt(document.documentElement.clientWidth/2+document.documentElement.scrollLeft-centerItem.offsetWidth/2)+"px";
   		}
    </script>
  </head>

  <body>
</c:if>
<div id="centerItem" class="div_login">

	    <h2>Sun's Family Tree</h2>
	<f:form action="" id="form_login" modelAttribute="loginForm" method="post" cssClass="cleanform">
	
		<c:if test="${not empty message}">
			<div id="message" class="${message.type}">${message.text}</div>
		</c:if> 
		<s:bind path="*">
			<c:if test="${status.error}">
				<div id="message" class="error">Form has errors</div>
			</c:if>
		</s:bind> 
	   
	   
	    <table width="400px" border="0">
	      <tr>
	        <td style="font-weight:bold;width:50px">账号：</td>
	        <td style="width: 152px"><f:input path="userId" type="text" cssStyle="width:150px"/></td>
	        <td style="text-align: left"><f:errors path="userId" cssClass="error" /></td>        
	      </tr>
	      <tr>
	        <td style="font-weight:bold;width:50px">密码：</td>
	        <td style="width: 152px"><f:input path="userPassword" type="password" cssStyle="width:150px"/></td>
	        <td style="text-align: left"><f:errors path="userPassword" cssClass="error"/></td>
	      </tr>
	      <tr>
	      	<td></td>
	      	<td><input type="submit" value="登录族谱" style="width: 86px"/></td>
	      	<td><a id="a_register" href="">注册</a></td>
	      </tr>
	    </table>
	    </f:form>
	    
	    <script type="text/javascript">
	    	$(function(){
	    		$("#form_login").submit(function() {  
					$.post($(this).attr("action"), $(this).serialize(), function(html) {
						if(html=='success'){
							window.location = url_main_page;
						}else{
							$("#centerItem").replaceWith(html);
							$('html, body').animate({ scrollTop: $("#message").offset().top }, 500);
							setCenter();
						}
					});
					return false;  
				});		
	    	});
	    
	    </script>
    </div>
    
<c:if test="${!ajaxRequest}">
  </body>
</html>
</c:if>
